<template>
  <div>
    <van-nav-bar title="配送员统计" left-text="返回" left-arrow v-back />
    <div class="finance-container">
      <finance-date-choose @dateChange="dateChange"></finance-date-choose>
      <div class="finance-content">
        <chart :height="'500px'" :id="'senderChart'" :option="option"></chart>
      </div>
    </div>
  </div>
</template>

<script>
  import FinanceDateChoose from '@/components/FinanceDateChoose'
  import Chart from '@/components/Chart'
  import Bar from 'echarts/lib/chart/bar'
  import {
    mapState
  } from 'vuex';
  import {
    CARRIER_COUNT
  } from '@/api/finance'

  export default {
    components: {
      FinanceDateChoose,
      Chart
    },
    computed: {
      ...mapState(['stationInfo'])
    },
    data() {
      return {
        searchDate: new Date().Format('yyyy'),
        searchDateType: 'year',
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 0,
              color: '#507FFC' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#50A1FC' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          grid: {
            left: '20px',
            right: '60px',
            bottom: '5%',
            top: '3%',
            containLabel: true
          },
          xAxis: {
            position: 'top',
            type: 'value',
            name: "次数",
            min: 0,
            nameLocation: "end",
            nameTextStyle: {
              color: "#999999"
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "#333333"
            },
            axisLine: {
              lineStyle: {
                color: "#BFBFBF",
              },
            }
          },
          yAxis: {
            type: 'category',
            nameGap: 0,
            nameTextStyle: {
              color: "#999999"
            },
            data: [],
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#333333",
            },
            splitLine: {
              color: "#999999"
            },
            axisLine: {
              lineStyle: {
                color: "#BFBFBF",
              }
            },
          },
          series: [{
            type: 'bar',
            data: [],
            barWidth: 12,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在右方显示
                  textStyle: { //数值样式
                    color: '#333333',
                    fontSize: 12
                  }
                }
              }
            }
          }]
        }
      }
    },
    mounted(){
      this.getData();
    },
    methods:{
      getData() {
        this.$reqGet(CARRIER_COUNT, {
          stationId: this.stationInfo.id,
          dateType: this.searchDateType,
          date: this.searchDate
        }).then(res => {
          if (res.code == 200) {
            console.log(res);
          }
        })
      },
      dateChange(info) {
        this.searchDate = info.date;
        this.searchDateType = info.type;
        this.getData();
      }
    }
  }

</script>
